<!--

    Copyright (c) 2014, 2019 Oracle and/or its affiliates. All rights reserved.

    This program and the accompanying materials are made available under the
    terms of the Eclipse Distribution License v. 1.0, which is available at
    http://www.eclipse.org/org/documents/edl-v10.php.

    SPDX-License-Identifier: BSD-3-Clause

-->

<!DOCTYPE html>
<html>
<head>
  <title>JCA Inbound Connector Traffic Information Service Example</title>
  <link rel="stylesheet" type="text/css" href="resources/css/default.css" />
  <script type="text/javascript">
      var wsocket;    // Websocket connection
      /* Connect to the Websocket endpoint
       * Set a callback for incoming messages */
      function connect() {
          wsocket = new WebSocket("ws://localhost:8080/traffic/wstraffic");
          wsocket.onmessage = onMessage;
      }
      /* Callback function for incoming messages
       * evt.data contains the message */
      function onMessage(evt) {
          /* Parse the message into a JavaScript object */
          var msg = JSON.parse(evt.data);
          /* Create a new table dynamically */
          var root = document.getElementById("traffictable");
          var table = document.createElement("table");
          var row = document.createElement("tr");
          var cell = document.createElement("th");
          var status;
          cell.appendChild(document.createTextNode("Access"));
          cell.setAttribute("width", "100px");
          cell.setAttribute("align", "center");
          row.appendChild(cell);
          cell = document.createElement("th");
          cell.setAttribute("width", "100px");
          cell.setAttribute("align", "center");
          cell.appendChild(document.createTextNode("Status"));
          row.appendChild(cell);
          table.appendChild(row);
          /* Add a row for every access */
          for (var access in msg) {
              if (msg.hasOwnProperty(access)) {
                  row = document.createElement("tr");
                  cell = document.createElement("td");
                  cell.setAttribute("align", "center");
                  cell.appendChild(document.createTextNode(access));
                  row.appendChild(cell);
                  status = msg[access];
                  cell = document.createElement("td");
                  cell.setAttribute("align", "center");
                  if (status === "GOOD") {
                      cell.setAttribute("style","color:green;font-weight:bold");
                  } else if (status === "SLOW") {
                      cell.setAttribute("style","color:orange;font-weight:bold");
                  } else if (status === "CONGESTED") {
                      cell.setAttribute("style","color:red;font-weight:bold");
                  } 
                  cell.appendChild(document.createTextNode(status));
                  row.appendChild(cell);
                  table.appendChild(row);
              }
          }
          root.innerHTML = "";
          root.appendChild(table);
      }
      /* Call connect() when the page first loads */
      window.addEventListener("load", connect, false);
  </script>
</head>
<body>
    <h1>JCA Inbound Connector Traffic Information Service Example</h1>
    <h2>Real-time Traffic Information for City1</h2>
    <div id="traffictable"></div>
</body>
</html>
